import * as React from 'react'
import { Link } from 'react-router-dom'
import { Tabs, Popover, /* Toast*/ } from 'antd-mobile'
import { SearchBar, FlatList, Button, /*Gird,*/ Image } from 'components'
import { browser, isFunc } from 'muka'
import { ToTop } from '../../viewComponent'
import './index.less'
import { post, NotBean } from '../../utils'

const all = require('../../assets/arrow_s_all.png')
const top = require('../../assets/arrow_s_top.png')
const bot = require('../../assets/arrow_s_bot.png')

export default class CategoryDetail extends React.Component<any, any> {
    public state = {
        tabs: [{
            title: '综合'
        }, {
            title: '销量',
            field: 'sale_number'
        }, {
            title: '价格',
            field: 'price_all'
        }, {
            title: ''
        }],
        priceSelect: false,
        nextPrice: false,
        viewType: 'horizontal',
        classfys: [],
        visible: false,
        // 综合
        colligate: [],
        // 销量
        sale_number: [],
        // 价格
        price_all: [],
        query: {
            name: ''
        },
        headerStatus: true
    }

    private params: any = {}

    private index: any = {
        0: 1,
        1: 1,
        2: 1
    }

    private animate = false

    private historyTop: number = 0

    private priceNode: any

    // private selected: string = ''

    public render(): JSX.Element {
        const { visible, classfys, tabs, viewType, headerStatus, query } = this.state
        const { list } = this.props
        const horizontal = require('../../assets/classfy.png')
        const vertical = require('../../assets/classfy_v.png')
        return (
            <React.Fragment>
                <div className="detail">
                    <SearchBar
                        className={`detail_search${this.animate ? headerStatus ? ' show' : ' hide' : ''}`}
                        right={<img className="detail_classfy" onClick={this.handleTabView} src={viewType === 'horizontal' ? horizontal : vertical} />}
                        options={[query.name]}
                        onClick={() => { this.props.history.goBack() }}
                        fixed={true}
                    />
                    <Popover
                        mask={true}
                        visible={visible}
                        overlay={[<div className="detail_popover" key="detail">
                            {
                                classfys.map((item: any, index: number) => {
                                    return (
                                        <Button onClick={this.classfyactive.bind(this, index)} className={`btn${item.active ? ' active' : ''}`} key={index}>{item.name}</Button>
                                    )
                                })
                            }
                        </div>]}
                    >
                        <div className={`classfy${this.animate ? headerStatus ? ' show' : ' hide' : ''}`} onClick={() => { this.setState({ visible: true }) }}>分类</div>
                    </Popover>
                    <Tabs
                        tabs={tabs}
                        swipeable={false}
                        usePaged={false}
                        prerenderingSiblingsNumber={0}
                        tabBarActiveTextColor="#fa0000"
                        onTabClick={this.handleTab}
                        renderTab={this.handleRenderTab}
                    >
                        <FlatList
                            ListEmptyComponent={NotBean}
                            style={{ marginTop: '1.8rem' }}
                            data={list[0]}
                            onRefresh={this.getData.bind(this, 0, '')}
                            renderItem={(data: any, index: number) => {
                                if (viewType === 'horizontal') {
                                    return (
                                        <Link to={`/shopDetail/${data.id}`} key={index}>
                                            <div className="detail_item flex">
                                                <Image className="detail_item__img" src={data.pic} />
                                                <div className="detail_item_info flex_1 divider">
                                                    <div className="detail_item_info__title">{data.name}</div>
                                                    <div className="detail_item_info__number flex">
                                                        <span className="DINPro flex_justify">¥ {data.price}+{data.price_q}</span>
                                                        <span className="hendou flex_justify">恒豆</span>
                                                        <div className="flex_justify">
                                                            <Button className="btn" tick={false}>新品</Button>
                                                        </div>
                                                    </div>
                                                    <div className="detail_item_info__label">{data.sale_number}人已购买</div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                } else {
                                    return (
                                        <Link to={`/shopDetail/${data.id}`} key={index}>
                                            <div className="detail_item vertical">
                                                <Image className="detail_item__img" src={data.pic} />
                                                <div className="detail_item_info flex_1" style={{ width: '100%' }}>
                                                    <div className="detail_item_info__title">{data.name}</div>
                                                    <div className="detail_item_info__number flex">
                                                        <span className="DINPro">¥ {data.price}+{data.price_q}</span><span className="hendou">恒豆</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                }
                            }}
                        />
                        <FlatList
                            ListEmptyComponent={NotBean}
                            style={{ marginTop: '1.8rem' }}
                            data={list[1]}
                            onRefresh={this.getData.bind(this, 1, 'sale_number')}
                            renderItem={(data: any, index: number) => {
                                if (viewType === 'horizontal') {
                                    return (
                                        <Link to={`/shopDetail/${data.id}`} key={index}>
                                            <div className="detail_item flex">
                                                <Image className="detail_item__img" src={data.pic} />
                                                <div className="detail_item_info flex_1 divider">
                                                    <div className="detail_item_info__title">{data.name}</div>
                                                    <div className="detail_item_info__number flex">
                                                        <span className="DINPro flex_justify">¥ {data.price}+{data.price_q}</span>
                                                        <span className="hendou flex_justify">恒豆</span>
                                                        <div className="flex_justify">
                                                            <Button className="btn" tick={false}>{}</Button>
                                                        </div>
                                                    </div>
                                                    <div className="detail_item_info__label">{data.sale_number}人已购买</div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                } else {
                                    return (
                                        <Link to={`/shopDetail/${data.id}`} key={index}>
                                            <div className="detail_item vertical">
                                                <Image className="detail_item__img" src={data.pic} />
                                                <div className="detail_item_info flex_1" style={{ width: '100%' }}>
                                                    <div className="detail_item_info__title">{data.name}</div>
                                                    <div className="detail_item_info__number flex">
                                                        <span className="DINPro">¥ {data.price}+{data.price_q}</span><span className="hendou">恒豆</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                }
                            }}
                        />
                        <FlatList
                            ListEmptyComponent={NotBean}
                            style={{ marginTop: '1.8rem' }}
                            data={list[2]}
                            onRefresh={this.getData.bind(this, 2, 'price_all')}
                            ref={(e: any) => { this.priceNode = e }}
                            renderItem={(data: any, index: number) => {
                                if (viewType === 'horizontal') {
                                    return (
                                        <Link to={`/shopDetail/${data.id}`} key={index}>
                                            <div className="detail_item flex">
                                                <Image className="detail_item__img" src={data.pic} />
                                                <div className="detail_item_info flex_1 divider">
                                                    <div className="detail_item_info__title">{data.name}</div>
                                                    <div className="detail_item_info__number flex">
                                                        <span className="DINPro flex_justify">¥ {data.price}+{data.price_q}</span>
                                                        <span className="hendou flex_justify">恒豆</span>
                                                        <div className="flex_justify">
                                                            <Button className="btn" tick={false}>新品</Button>
                                                        </div>
                                                    </div>
                                                    <div className="detail_item_info__label">{data.sale_number}人已购买</div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                } else {
                                    return (
                                        <Link to={`/shopDetail/${data.id}`} key={index}>
                                            <div className="detail_item vertical">
                                                <Image className="detail_item__img" src={data.pic} />
                                                <div className="detail_item_info flex_1" style={{ width: '100%' }}>
                                                    <div className="detail_item_info__title">{data.name}</div>
                                                    <div className="detail_item_info__number flex">
                                                        <span className="DINPro">¥ {data.price}+{data.price_q}</span><span className="hendou">恒豆</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                }
                            }}
                        />
                    </Tabs>

                    {/* <div className="detail_interest flex_center">
                    <img src={require('../../assets/zhuanti.png')} />
                </div>
                <Gird className="detail_gird">
                    <div>
                        <Image className="detail_gird__logo" src={require('../../assets/detail_01.png')} />
                        <div className="detail_gird__title flex_justify">运动户外 狂欢3天开始啦！</div>
                    </div>
                    <div>
                        <Image className="detail_gird__logo" src={require('../../assets/detail_02.png')} />
                        <div className="detail_gird__title flex_justify">轻奢盛夏折扣季 大牌包新色海量上新！</div>
                    </div>
                </Gird>
                <End /> */}
                </div>
                <ToTop />
            </React.Fragment>
        )
    }

    public componentDidMount() {
        const search: any = browser.search
        this.setState({ query: search })
        if (search.id) {
            this.getClassify(search.id)
        }
        window.addEventListener('scroll', this.handleScroll)
    }

    public componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll)
    }

    private handleScroll = () => {
        const tops = document.documentElement.scrollTop || document.body.scrollTop
        const dom: any = document.querySelector('.am-tabs-tab-bar-wrap')
        if (tops > 200) {
            this.animate = true
            this.setState(
                {
                    headerStatus: false
                },
                () => {
                    const className = dom.className.split(' ')
                    if (className.includes('show')) {
                        className.pop()
                    }
                    if (!className.includes('hide')) {
                        className.push('hide')
                        dom.className = className.join(' ')
                    }
                }
            )
        } else {
            if (!this.animate) {
                return
            }
            this.setState(
                {
                    headerStatus: true
                },
                () => {
                    const className = dom.className.split(' ')
                    if (className.includes('hide')) {
                        className.pop()
                    }
                    if (!className.includes('show')) {
                        className.push('show')
                        dom.className = className.join(' ')
                    }
                }
            )
        }
        if (this.historyTop > tops && tops > 200 && this.animate) {
            this.setState(
                {
                    headerStatus: true
                },
                () => {
                    const className = dom.className.split(' ')
                    if (className.includes('hide')) {
                        className.pop()
                    }
                    if (!className.includes('show')) {
                        className.push('show')
                        dom.className = className.join(' ')
                    }
                }
            )
        }
        this.historyTop = tops
    }

    private getClassify(id: string) {
        post('goodsapi/goodsCategoryVis', {
            id
        }).then((data: any) => {
            data.map((item: any) => {
                item.active = false
                return item
            })
            this.setState({
                classfys: data
            })
        })
    }

    private getData = (status: number, by: string, finshLoad?: () => void) => {
        const { SET_DETAIL_LIST, list } = this.props
        const params = browser.search
        post('goodsapi/goodsList', {
            ...params,
            ...this.params,
            page: this.index[status],
            by
        }).then((data: any) => {
            if (this.index[status] === 1) {
                SET_DETAIL_LIST(data.data, status)
                if (isFunc(finshLoad)) {
                    finshLoad()
                }
            } else {
                if (data.data.length) {
                    const val = [...list[status]]
                    SET_DETAIL_LIST(val.concat(data.data), status)
                    if (isFunc(finshLoad)) {
                        finshLoad()
                    }
                }
            }
            this.index[status]++
        })
    }

    private handleTabView = () => {
        const { viewType } = this.state
        if (viewType === 'horizontal') {
            this.setState({
                viewType: 'vertical'
            })
        } else {
            this.setState({
                viewType: 'horizontal'
            })
        }
    }

    private handleRenderTab = (tab: any) => {
        const { priceSelect, nextPrice } = this.state
        if (tab.field === 'price_all') {
            return <div>{tab.title}<img className="select_arrow" src={priceSelect ? nextPrice ? bot : top : all} /></div>
        } else {
            return tab.title
        }
    }

    private handleTab = (tab: any, index: number) => {
        const { priceSelect, nextPrice } = this.state
        // this.selected = tab.field
        if (tab.field) {
            if (!this.state[tab.field].length && tab.field !== 'price_all') {
                // this.getData('goodsapi/goodsList', tab.field)
            }
        } else {
            if (!this.state.colligate.length) {
                // this.getData('goodsapi/goodsList', 'colligate')
            }
        }

        if (tab.field === 'price_all') {
            this.setState({
                priceSelect: true
            })
            this.params = {
                by: tab.field,
                sort: 'ASC'
            }
            if (priceSelect) {
                if (nextPrice) {
                    this.params.sort = 'ASC'
                } else {
                    this.params.sort = 'DESC'
                }
                this.setState({
                    priceSelect: true,
                    nextPrice: !nextPrice
                })
            }
            if (this.priceNode) {
                this.priceNode.finishLoad()
            }
            this.index[2] = 1
            this.getData(2, 'price_all')
        } else {
            this.params.sort = 'DESC'
            this.setState({
                priceSelect: false,
                nextPrice: false
            })
        }
    }

    private classfyactive(index: number) {
        const { classfys } = this.state
        let data: any = [...classfys]
        data = data.map((item: any, key: number) => {
            if (index === key) {
                item.active = true
            } else {
                item.active = false
            }
            return item
        })
        // this.setState({ classfys: data, query: data[index], sale_number: [], price_all: [], colligate: [] }, () => {
        //     if (this.selected === 'sale_number') {
        //         this.getData('goodsapi/goodsList', 'sale_number')
        //     } else if (this.selected === 'price_all') {
        //         this.getData('goodsapi/goodsList', 'price_all')
        //     } else {
        //         this.getData('goodsapi/goodsList', 'colligate')
        //     }
        // })
    }
}